<template>
  <page-main class="page-report-list page-pay-list">
    <div class="p-t-15"></div>
    <current-patient ref="currentPatient" @select="changePatient" />
    <div class="condition">
      <van-tabs v-model="searchParams.payStatus" @change="getList" title-active-color="#1989fa">
        <van-tab title="待支付" name="0"></van-tab>
        <van-tab title="支付记录" name="1"></van-tab>
      </van-tabs>      
    </div>
    <div class="m-x-15">
    <van-empty description="暂无记录" v-if="list.length == 0" />
    <van-pull-refresh v-model="refreshing" @refresh="getList" v-else>
      <div class="fly-panel" v-for="(item,index) in list" :key="index">
        <div class="hd">
          <div class="title">
            <div><b>{{ $util.setName(item.billType, init_data.billTypelist) }}</b></div>
            <div class="c-grey p-t-5">No.{{ item.makeId }}</div>
          </div>
          <div class="value">
            <div>{{ item.staffName }}</div>
            <div class="p-t-5">{{item.officeName}}</div>
          </div>
        </div>          
        <van-cell-group :border="false" class="project-list">
            <van-cell v-for="(sub,j) in item.wxBillVos" :key="j" :title="$util.setName(sub.theType, init_data.theType_list)" :border="false" size="mini" is-link  @click="$util.gotoPage('/pay/detail', {theBillId: sub.theBillId})">
              <span class="c-red">￥{{ sub.balanceAmt }}</span>
            </van-cell>
        </van-cell-group>
        <div class="ft" v-if="searchParams.payStatus == '0'">
          <span class="m-r-15 fl" style="line-height:48px;">总计：<b class="c-red">￥{{ item.balanceAmt }}</b></span>
          <van-button type="info" class="p-x-40" @click="submitPay(item)">支付</van-button>
        </div>
      </div>
    </van-pull-refresh>
    </div>
  </page-main>
</template>
<script>
import currentPatient from '@/view/components/currentPatient';
import dateRange from '@/components/DateRange/tag';
import longList from '@/assets/mixins/longList';
export default {
  mixins: [longList],
  components:{
    currentPatient,
    dateRange
  },
  data(){
    return{
      patient:{},
      refreshing: false,
      searchParams:{
        patientId: null, 
        payStatus:'0'
      },
      list:[],
      init_data:{},
      btn_loading: false,
    }
  },
  created(){
    this.getInitData();
  },
  mounted(){
    this.patient = this.$refs.currentPatient.getCurrentPatient();
    this.searchParams.patientId = this.patient.patientId;
    this.getList();
  },
  methods:{
    async getInitData(){
      this.init_data.theType_list = await this.$util.getDictList('the_type');
      this.init_data.billTypelist = await this.$util.getDictList('bill_type');
      this.init_data.payStatus_list = await this.$util.getDictList('pay_status');
    },
    getList(){
      this.refreshing = true;
      this.theBillIds = [];
      this.totalPrice = 0;
      this.isAll = false;
      this.$http('get', '/admin/bill/GetBillList', this.searchParams, (data,msg) => {
        this.list = data;
        this.refreshing = false;
      }, msg => {
        this.refreshing = false;
      })
    },
    changePatient(obj){
      this.searchParams.patientId = obj.patientId;
      this.getList();
    },
    async submitPay(item){
      let ids = item.wxBillVos.map(item => item.theBillId);
      let params = {
        openId: localStorage.getItem('openId'),
        paymentType:2,
        theBillId: ids,
        totalPaymentAmt: item.balanceAmt
      };
      this.btn_loading = true;
      this.$toast.loading({
        message: '支付中，请稍等...',
        forbidClick: true,
      });
      this.$store.dispatch('submitAndPayGet', params).then(res => {
        setTimeout(() => {
          this.$toast.clear();
          this.btn_loading = false;
        }, 5000);
      }).catch(error => {
        this.$toast.clear();
        this.btn_loading = false;
      })    
    }
  }
}
</script>
